<template>
  <div class="app-page">
    <table-search
      label-width="80px"
      :search-form="searchFormItem"
      :on-submit="handleQuery"
      :on-reset="handleQuery"
    />
    <el-card>
      <div class="content">
        <div class="app-table-action-wrap">
          <auth-button
            auth-key="b_1_1"
            type="primary"
            icon="el-icon-plus"
            size="small"
            @click="handleAdd"
          >
            新增
          </auth-button>
        </div>

        <table-paging
          :table-list="tableList"
          :table-column="tableColumn"
          :table-paging="tablePaging"
          :table-total="tableTotal"
          :table-btn-width="140"
          @pagingChange="handlePaginChange"
        />
      </div>

      <part-update
        ref="partUpdate"
        :title="dialogTitle"
        :visible.sync="dialogVisible"
        :port-id="portId"
        @handleModalSubmit="handleModalSubmit"
      />
    </el-card>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { searchFormItem, tableColumn } from './config'
import { fetchComponentFindPage, fetchComponentGet, fetchComponentAdd, fetchComponentUpdate, fetchComponentDelete, fetchComponentUpdateStatus } from '@/api/basicinfo/parts/index'
import { TableSearch, TablePaging, AuthButton } from '@/components'
import PartUpdate from './update'

export default {
  name: 'Index',
  components: { TableSearch, TablePaging, PartUpdate, AuthButton },
  data() {
    return {
      searchFormData: {},
      searchFormItem: searchFormItem(this.dropPartTypeList),

      tableList: [],
      tableColumn: tableColumn(this.handleMapShow, this.handleEdit, this.handleUpdateStatus, this.handleDelete),
      tableTotal: 0,
      tablePaging: {
        page: 1,
        pagesize: 10
      },

      dialogTitle: '新增',
      dialogVisible: false,
      portId: 0
    }
  },
  computed: {
    ...mapGetters(['dropPartTypeList', 'userOrgId'])
  },
  watch: {
    dropPartTypeList() {
      this.searchFormItem = searchFormItem(this.dropPartTypeList)
    }
  },
  created() {
    this.$store.dispatch('dropDown/postDropPartTypeList')
    this.postFindPage()
  },
  methods: {
    handleQuery(values) { // 查询
      this.searchFormData = values
      this.tablePaging = {
        page: 1,
        pagesize: 10
      }
      this.postFindPage()
    },

    handleAdd() { // 添加
      this._setModalData()
      this.dialogVisible = true
    },

    handleEdit(id) { // 修改
      this.portId = id
      this.postGet(id)
    },

    handleUpdateStatus(id, status) { // 开始
      this.postStatusUpdate(id, status)
    },

    handleDelete(id) { // 删除
      this.postDelete(id)
    },

    handleMapShow(row) { // 点击查看
      const { coordinateSet, markType, address } = row
      const temp = JSON.parse(coordinateSet || '[]')
      const newCoordinateSet = markType === 1 ? temp[0] : temp
      this.$refs.partUpdate.$refs.dialogMap.setPosition(newCoordinateSet, markType, address, true)
      this.$refs.partUpdate.mapVisible = true
    },

    handleModalSubmit(values) { // 弹窗提交
      if (values.id) {
        this.postUpdate(values)
        return false
      }
      this.postAdd(values)
    },

    hanleClose() { // 弹窗关闭
      this.dialogVisible = false
    },

    handlePaginChange(pageInfo) { // 分页改变
      this.tablePaging = pageInfo
      this.postFindPage()
    },

    _setModalData(title = '新增', visible = true, modalFormData = { orgId: this.userOrgId }) { // 设置弹窗
      this.dialogTitle = title
      this.dialogVisible = visible
      this.$refs.partUpdate.modalFormData = this._formatModalFormData(modalFormData)
    },

    _formatModalFormData(data) { // 格式化弹窗数据
      if (this.dialogTitle === '修改') {
        const { deptId, headerAccountId, deviceIdStr } = data
        this.$refs.partUpdate.handleComponentTypeIdChange(data.componentTypeId)
        this.$refs.partUpdate.handleComponentTypeChange(data.componentType)
        data.headerAccountIdList = [deptId, headerAccountId]
        data.deviceIdList = deviceIdStr ? deviceIdStr.join(',') : []
      }
      return data
    },

    postFindPage() { // 查询数据
      fetchComponentFindPage({ ...this.searchFormData, ...this.tablePaging })
        .then((res) => {
          const { records, current, size, total } = res
          this.tableList = records
          this.tablePaging = {
            page: current,
            pagesize: size
          }
          this.tableTotal = total
        })
    },

    postAdd(values) { // 添加
      fetchComponentAdd(values).then(res => {
        this.dialogVisible = false
        this.$message.success('新增成功')
        this.postFindPage()
      })
    },

    postGet(id) { // 获取详情
      fetchComponentGet({ id }).then(res => {
        this._setModalData('修改', true, res)
      })
    },

    postDelete(id) { // 删除
      fetchComponentDelete({ id }).then(() => {
        this.$message.success('删除成功')
        this.postFindPage()
      })
    },

    postUpdate(values) { // 更新
      fetchComponentUpdate(values).then(() => {
        this.dialogVisible = false
        this.$message.success('修改成功')
        this.postFindPage()
      })
    },

    postStatusUpdate(id, status) { // 启用停用
      fetchComponentUpdateStatus({ id, status }).then(() => {
        this.$message.success('操作成功!')
        this.postFindPage()
      })
    }

  }
}
</script>

<style lang="scss" scoped>

</style>
